<template>
  <div id="app" v-cloak>
    <div class="container" :class="currSystem">
      <HeaderByPhone v-if="currSystem=='PHONE'"></HeaderByPhone>
      <Header v-else></Header>
      <div class="main-box">
        <router-view />
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import HeaderByPhone from '@/layout/headerByPhone.vue';
import Footer from '@/layout/footer.vue'
import Header from '@/layout/header.vue';
export default {
  // name: "App",
  components: {
    HeaderByPhone,
    Header,
    Footer
  },
  data() {
    return {
      currSystem:"PHONE"
    };
  },
  created() {
    this.currSystem=this.isMobileDevice() ? 'PHONE':'PC';
    // window.alert(`currSystem:${this.isMobileDevice()},${navigator.userAgent}`)
  },
  mounted() {
    // 在组件挂载时添加事件监听
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    },
    handleResize() {
      this.currSystem=this.isMobileDevice() ? 'PHONE':'PC';
    },
  },
};
</script>

<style lang="less">
.aa {
  transition: all 0.5s;
}

.go {
  transform: rotate(-180deg);
  transition: all 0.5s;
}

#app {
  width: 100%;
  height: 100%;
  // border:1px red solid;
}

.footer_link a {
  color: #b4b4b4;
}

.container {
  width: 100%;

  .main-box {
    width: 100%;
  }
}
.beian a {
  color: #555;
}

.beian a:hover {
  color: gray;
}

.qr-box {
  width: 50%;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

[v-cloak] {
  display: none !important;
}
</style>
